<section class="content" id="login-form-app">
    <div class="modal fade" id="modal-login-form" ref="loginForm">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">登录</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="box-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">帐号</label>
                                <div class="col-sm-10">
                                    <input class="form-control" v-model="user.account" placeholder="帐号" @keyup.enter="submit">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" v-model="user.password" placeholder="密码" @keyup.enter="submit">
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="submit">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</section>
<script>
    var login_form_app = new Vue({
        el: '#login-form-app',
        data: {
            user: {
                account: '',
                password: ''
            }
        },
        created: function () {
            this.$nextTick(function () {
                this.show();
            });
            window.addEventListener('hashchange', function (e) {
                if ("#login" === window.location.hash) this.show();
                else this.hide();
            }.bind(this));
        },
        methods: {
            submit: function () {
                ajaxLogin(this.user, function (data) {
                    this.user.account = '';
                    this.user.password = '';
                    this.hide();
                    window.location.hash = '#index';
                }.bind(this));
            },
            show: function () {
                $(this.$refs.loginForm).modal({backdrop:'static',keyboard:false});
            },
            hide: function () {
                $(this.$refs.loginForm).modal('hide');
            }
        }
    })
</script>